import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';
import viewport from 'postcss-mobile-forever';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

const pathSrc = path.resolve(__dirname, './src');

export default defineConfig({
  server: {
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://172.16.222.153:9005', // 测试环境
        // target: 'http://172.16.222.6:9005', // 本地环境
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  base: '/mob/',
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  css: {
    // CSS 预处理器
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/var/index.scss" as *;',
      },
    },
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: 'px', // 需要转化的单位，默认px
          viewportWidth: 375,
          // viewportWidth: (file) => {
          //   // 动态判断设计稿尺寸
          //   return file && file.includes('node_modules/vant') ? 375 : 750;
          // },
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw 强制字体使用固定单位
          selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: /node_modules\/(?!vant)/, // 设置忽略文件，用正则做目录名匹配 只处理 vant 和 src 下的文件
          landscape: false, // 是否处理横屏情况
        }),
        // 处理最大宽度
        viewport({
          appSelector: '#app',
          maxDisplayWidth: 600,
          rootContainingBlockSelectorList: [
            '.van-tabbar',
            '.van-popup--bottom',
            '.van-swipe__track',
          ],
        }),
      ],
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      vueTemplate: true, // 是否在 vue 模板中自动导入
      dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts'), // 指定自动导入函数TS类型声明文件路径
    }),
    Components({
      resolvers: [VantResolver()],
      // 指定自定义组件位置(默认:src/components)
      dirs: ['src/components', 'src/**/components'],
      dts: path.resolve(pathSrc, 'types', 'components.d.ts'), // 指定自动导入组件TS类型声明文件路径
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), './src/assets/icons')], // 指定svg存放的路径
      symbolId: 'icon-[name]', // 指定svg的id
    }),
  ],
});
